<template>
  <vxe-pulldown ref="xDown" :transfer="true" :destroy-on-close="false"  style="width:100%;"
  @hide-panel="onHidePanel">
    <template #default>
      <vxe-input v-model="insideName" suffix-icon="vxe-icon-search" 
        style="width:100%"
        accessKey="s"
        clearable
        placeholder="输入仓库编号、名称、联系电话查找" 
        @focus="handleShow"
        @clear="handleClear"
        @suffix-click="handleShow"
        ></vxe-input>
    </template>
    <template #dropdown>
      <div style="width:560px;">
        <vxe-grid ref="xGrid" border auto-resize size="mini" height="240"
          class="mytable-style"
          resizable
          :row-class-name="rowClassName"
          :row-config="{isHover: true, isCurrent: true, keyField: 'id', useKey: true, }"
          :keyboard-config="{isArrow: true, isEnter: false,}"
          :radio-config="{highlight: true, visibleMethod: ({row}) => row.enable === 1}"
          :data="innerList.tableData"
          :columns="whColumns"
          @keydown="handleKeydown"
          @cell-click="handleCellClick">
        </vxe-grid>
      </div>
    </template>
  </vxe-pulldown>
</template>
<script lang="ts" name="xPulldownOfWh" setup>
import {reactive, ref, toRaw, watch, watchPostEffect,} from 'vue';
import {VxeTablePropTypes, VxePulldownInstance,} from 'vxe-table';
import XEUtils from 'xe-utils'
import {getListData as getWhListData} from '/@/api/bd/warehouse';
import {whColumns,} from '../data';
import __ from 'lodash-es'

const props = defineProps({
  row: {type: Object, default: null,},
})

const emits = defineEmits(['selected-one', 'empty',])

const xDown = ref<VxePulldownInstance>()
const innerList = reactive({
  tableData: [] as any[], // 筛选后的数据
  listData: [] as any[], // 原始的数据
})
const selectedRow = ref()

const insideName = ref('')
watchPostEffect(async () => {
  if (props.row) {
    insideName.value = props.row?.whName
  }
})

const xGrid = ref()
const handleKeydown = ({ $event }) => {
  if ($event.keyCode === 13 || $event.key === 'Enter') {
    let row = xGrid.value.getCurrentRecord()
    if (row && row.enable === 1) {
      xDown.value?.hidePanel()
      emits('selected-one', toRaw(row))
    }
  }
}
const handleCellClick = ({row,}) => {
  if (row.enable === 1) {
    selectedRow.value = toRaw(row)
    emits('selected-one', toRaw(row))
    xDown.value?.hidePanel()
  }
}

const rowClassName: VxeTablePropTypes.RowClassName = ({ row, }) => {
  if (row.enable !== 1) {
    return 'row-enable'
  }
  return null
}

watch(() => insideName.value, (v1, _) => {
  if (v1) {
    innerList.tableData = innerList.listData.filter((row:any) => {
      return (
        row?.name.indexOf(v1) > -1
        || row?.code.indexOf(v1) > -1
        || row?.phone.indexOf(v1) > -1)
    })
  } else {
    innerList.tableData = innerList.listData.slice(0)
  }
})

const onHidePanel = () => {
  innerList.tableData = []
  innerList.listData = []
  selectedRow.value = null
  if (!innerList.listData.some(e => e.name === props.row.whName) && !props.row.whId) {
    emits('empty')
  }
}

const handleShow = () => {
  xDown.value?.showPanel().then(() => {
    // 每次都拉取数据
    getWhListData().then(dd => {
      let tableData = dd.filter(e => {
        if (!props.row.whId && props.row.whName) {
          return XEUtils.toValueString(e.name).toLowerCase().indexOf(props.row.whName) !== -1
        } else {
          return true
        }
      })
      innerList.tableData = tableData as never[];
      innerList.listData = dd as never[];
    })
    xGrid.value.focus()
  })
}

const handleClear = () => {
  emits('empty')
}

</script>
<style scoped>
:deep().mytable-style .vxe-body--row.row-enable {
  opacity: .5;
}
</style>
